window.onload = function() {
	try {
		let div1 = document.getElementById("indexImgDiv");
		let divSon = div1.getElementsByClassName("indexImg");
		let halfWidth = divSon[0].offsetHeight;
		let divNum = divSon.length;
		let degNum = Math.cos(Math.PI / divNum) * halfWidth; //-halfWidth * Math.tan((360 / divNum) / 3);
		let moveZ01 = divSon[0].offsetHeight / (Math.tan(Math.PI / divNum) * 2);
		let degs = [],
			lis = null;
		let bottomArowDiv = document.getElementsByClassName("bottomArrow")[0].getElementsByTagName("img");
		for(let i = 0; i < divNum; i++) {
			degs.push((360 / divNum) * (i));
			divSon[i].style.transform = "rotateX(" + -degs[i] + "deg) translateZ(" +
				moveZ01 +
				"px)";
			lis = document.createElement("li");
			lis.style.width = lis.style.height = "50px";
			lis.innerHTML = "<img src='indexImg/右箭头01.png' width='auto' height='100%' />";
			document.getElementsByClassName("bottomArrow")[0].children[0].appendChild(lis);
		}
		lis = null;

		let set01 = null,
			index01 = 0;
		activeSet();

		function activeSet() {
			clearInterval(set01);
			set01 = setInterval(function() {
				rotateDiv01();
			}, 2200);
		}
		div1.addEventListener("mouseover", function(e) {
			clearInterval(set01);

			for(let i = 0; i < divNum; i++) {
				bottomArowDiv[i].parentElement.addEventListener("mouseover", function() {
					index01 = i;
					rotateDiv01();
					//document.getElementsByClassName("rotateX01")[0].style.transform = "rotateX(" + (index01 * (360 / divNum)) + "deg)";
				});

			}
			div1.addEventListener("mouseleave", function(e) {
				activeSet();

			});
		});

		function rotateDiv01() {
			for(let i = 0; i < divNum; i++) {
				bottomArowDiv[i].style.transform = "";

			}
			document.getElementsByClassName("rotateX01")[0].style.transform = "rotateX(" + (index01 * (360 / divNum)) + "deg)";
			bottomArowDiv[index01].style.transform = "rotate(-90deg)";
			index01++;
			if(index01 === divNum) {
				index01 = 0;
			}
		}

		document.addEventListener("visibilitychange", function() {

			if(document.visibilityState == "visible" || !document.hidden) {
				clearInterval(set01);
				activeSet();
				console.log("hidden" + new Date().toLocaleString());
				return;

			}
			clearInterval(set01);
			console.log("visible" + new Date().toLocaleString());

		});

	} catch(err) {
		alert(err);
	}
	
}